<template>
	<!-- loading 加载 -->
	<view class="mix-loading-content"
		:class="{'loading-mask': show,'zindex':nzIndex, 'mask': info.mask, 'maskColor': info.maskColor}"
		@catchtouchmove="stopMove">
		<!-- name:{{info.name}} -->
		<!-- content:{{info.content}} -->
		<!-- {{info.interval}} -->
		<view class="mix-loading-wrapper">
			<view class="mix-loading-pro text-cut" :class="imgSize">
				<image class="mix-loading-icon" 
					:src="imgSrc">
				</image>

				<view v-if="info.title" :style="{color:info.color}" class="mix-loading-text text-cut">
					{{info.title}}{{time?time:''}}
				</view>
			</view>

		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref,onBeforeUnmount } from 'vue'
	import { useLoadingStore } from '@/stores/commonStore';
	import { storeToRefs } from 'pinia';
	import { hideLoading } from '@/utils/helper';
	// import { useUserStore } from '@/stores/loadingStore';
	// const store = useUserStore();
	// const { count,doubleCount } = storeToRefs(store)
	// const qrClick = ()=>{
	// 	store.increment();
	// }
	
	// console.log('useLoadingStore++',useLoadingStore);
	const store = useLoadingStore();
	const { show,info } = storeToRefs(store)
	// store.$reset()//将state重置初始化
	defineProps({
		nzIndex: {
			type: Boolean,
			default: false,
		},
		imgSrc:{
			type:String,
			default:''
		},
		imgSize: {
			type: String,
			default: 'df',
		},
		
	});
	onBeforeUnmount (()=>{
		console.log('onBeforeUnmount');
		hideLoading()
	})
	
	const stopMove = ()=> {}
	const time = ref(0)//
	
</script>

<style lang="scss">
	.mix-loading-content {
		display: none;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: transparent;
		z-index: 666666;

		&.zindex {
			z-index: 666666;
		}

		&.mask {
			background-color: transparent;
		}

		&.mask.maskColor {
			background-color: rgba(0, 0, 0, .3);
		}

		&.loading-mask {
			display: flex;
		}
	}

	.mix-loading-text {
		max-width: 270rpx;
		margin-top: 8rpx;
		font-size: 24rpx;
		padding: 0 20rpx;
		color: #fff;
	}

	.mix-loading-pro {
		text-align: center;
		// min-width: 80rpx;
		min-width: 180rpx;
		min-height: 180rpx;
		max-width: 270rpx;
		background: rgba(0, 0, 0, 0.6);
		border-radius: 14rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		&.lg{
			background:none;
			.mix-loading-icon{
				width: 140rpx;
				height: 140rpx;
			}
		}
	}

	.mix-loading-wrapper {
		display: flex;
		justify-content: center;
		align-items: center;
		// animation: loading .5s ease-in infinite both alternate;
	}

	.mix-loading-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 8rpx;
		transition: .3s;
	}

	@keyframes loading {
		0% {
			transform: translateY(-20rpx) scaleX(1);
		}

		100% {
			transform: translateY(4rpx) scaleX(1.3);
		}
	}
</style>